<template>
   <div>
    <ul>
    <li v-for="(item,index) in list" :key="index">
      {{ item.data }} - {{item.name}}
    </li>
  </ul>
  <p v-if="loading">加载中..</p>
  <p>count:{{count}}</p>
  <br>
      <button
        @click="pushFunction()">
        Add to cart
      </button>
   </div>
</template>

<script>
import { mapGetters, mapActions, mapState } from "vuex";
export default {
  computed: {
    // 使用对象展开运算符将 getter 混入 computed 对象中
    // ...mapGetters([
    //   'list',
    //   'loading',
    //   'count'
    // ])
    ...mapGetters("list/",{
      list: state => state.list,
      loading: state => state.loading
    }),
    ...mapGetters("count/",{
      count: state => state.count
    })
  },
  data() {
    return {
      number: 1
    };
  },
  methods: {
    ...mapActions(["list/push"]),
    pushFunction() {
      this.number++;
      this.push({ data: 1000, name: "1000" + this.number });
      console.log(this.lists);
    }
  },
  created() {
    //this.$store.dispatch('push',{"data":"hehe"})
    // console.log(
    //   "this.liststhis.liststhis.liststhis.liststhis.lists",
    //   this.$store.state,
    //   "loading:::",
    //   this.loading
    // );
    console.log("xxxxxxxxxxxxxxxxxxx",{...mapGetters({
      list: state => state.list,
      loading: state => state.loading
    })})
    alert("safdffsd")
  }
};
</script>